<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数据列表</title>
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../plugins/jquery-ui/jquery-ui.min.css" media="all">
</head>
<body class="layui-layout-body" style="padding: 16px">
<form class="layui-form" onsubmit="return false">
    <div class="layui-col-md6 layui-col-xs6">
        <div class="layui-form-item brick"><label class="layui-form-label" style="">类型</label>
            <div class="layui-input-block">
                <select lay-verify="required" lay-filter="type">
                    <option value="button">按钮</option>
                    <option value="menuButton">菜单</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-col-md6 layui-col-xs6">
        <div class="layui-form-item brick"><label class="layui-form-label" style="">权限</label>
            <div class="layui-input-block"><input type="text" lay-verify="required" class="layui-input" name="autz" size="6"></div>
        </div>
    </div>
    <div class="layui-col-md6 layui-col-xs6">
        <div class="layui-form-item brick"><label class="layui-form-label" style="">图标</label>
            <div class="layui-input-block"><input type="text" lay-verify="required" class="layui-input" name="iconCls" size="6"></div>
        </div>
    </div>
    <div class="layui-col-md6 layui-col-xs6">
        <div class="layui-form-item brick"><label class="layui-form-label" style="">标题</label>
            <div class="layui-input-block"><input type="text" lay-verify="required" class="layui-input" name="text" size="6"></div>
        </div>
    </div>
    <hr>
    <div data-select-id="btn">
        <div id="script_editor" style="width: 100%; height: 250px;"></div>
    </div>
    <div data-select-id="menu" style="display: none">
        <button class="layui-btn layui-btn-normal" data-select-id="add" type="button">添加</button>
        <table id="menuTable" lay-filter="menuTable"></table>
    </div>
    <div style="width: 100%;text-align: right">
        <button class="layui-btn layui-btn-danger" data-select-id="delete" type="button" style="display: none">删除</button>
        <button class="layui-btn layui-btn-normal" data-select-id="submit" type="button">提交</button>
    </div>
</form>
<script src="../../plugins/layui/layui.all.js"></script>
<script src="../../plugins/jquery-ui/jquery.js"></script>
<script src="../../plugins/jquery-ui/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script type="text/html" id="icon">
    <i class="layui-icon">{{ d.iconCls ? d.iconCls : ''}}</i>
</script>
<script type="text/html" id="menuToolbar">
    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">
        <i class="layui-icon">&#xe640;</i>
    </button>
</script>
<script type="text/html" id="empty">
    <span style="display: none">{{ JSON.stringify(d)}}</span>
</script>
<script>
    layui.use(['form','table'],function (form,table) {
        form.render()

        var editor = ace.edit("script_editor")
        editor.setTheme("ace/theme/clouds")
        editor.getSession().setMode("ace/mode/javascript")

        table.render({
            elem: '#menuTable',
            cols: [[
                {field:'iconCls',title:'图标',edit:true,templet:'#icon'},
                {field:'text',title:'标题',edit:true},
                {field:'autz',title:'权限',edit:true},
                {field:'onclick',templet:'#empty',title:'点击事件',event:'editOnClick'},
                {toolbar:'#menuToolbar',title:'操作'}
            ]],
        })

        var optionFunc = function (table,editor) {

            this.state = {
                btn:{children:[]}
            }

            this.loadToolBar = function (toolbar) {
                if(toolbar){
                    this.state.btn = toolbar
                    if(this.state.btn.type == 'menuButton'){
                        for (var i = 0; i< this.state.btn.children.length;i++){
                            if(!this.state.btn.children[i].code){
                                this.state.btn.children[i].code = new Date().getTime()
                            }
                        }
                    }
                    this.render()
                }
            }

            this.getToolBar = function () {
                var config = {}
                config.type = this.state.btn.type ? this.state.btn.type : 'button'
                config.autz = $('[name="autz"]').val()
                config.iconCls = $('[name="iconCls"]').val()
                config.text = $('[name="text"]').val()

                if(config.type == 'menuButton'){
                    config.children = this.state.btn.children
                }else if(config.type == 'button'){
                    config.onclick = editor.getValue()
                }

                config.code = this.state.btn.code

                return config
            }
            
            this.render = function () {
                if(this.state.btn.autz){
                    $('[name="autz"]').val(this.state.btn.autz)
                }
                if(this.state.btn.iconCls){
                    $('[name="iconCls"]').val(this.state.btn.iconCls)
                }
                if(this.state.btn.text){
                    $('[name="text"]').val(this.state.btn.text)
                }
                if(this.state.btn.type == 'button'){
                    $('[data-select-id="menu"]').hide()
                    $('[data-select-id="btn"]').show()
                    $('[lay-filter="type"]').find('[value="button"]').prop('selected',true)
                    editor.setValue(this.state.btn.onclick ? this.state.btn.type : '')
                }else if(this.state.btn.type == 'menuButton'){
                    $('[data-select-id="menu"]').show()
                    $('[data-select-id="btn"]').hide()
                    $('[lay-filter="type"]').find('[value="menuButton"]').prop('selected',true)
                    table.reload('menuTable',{
                        data: this.state.btn.children
                    })
                }
                form.render('select')
            }

            this.create = function (line) {
                line.code = new Date().getTime()
                this.state.btn.children.push(line)
                this.render()
            }

            this.update = function (line) {
                for (var i = 0; i< this.state.btn.children.length;i++){
                    if(this.state.btn.children[i].code == line.code){
                        this.state.btn.children[i] = line
                        break
                    }
                }
                this.render()
            }

            this.delete = function (code) {
                var tmp = []
                for (var i = 0; i< this.state.btn.children.length;i++){
                    if(this.state.btn.children[i].code != code){
                        tmp.push(this.state.btn.children[i])
                    }
                }
                this.state.btn.children = tmp
                this.render()
            }

        }

        var option = new optionFunc(table,editor)

        table.on('tool(menuTable)',function (e) {
            if(e.event == 'editOnClick'){
                layer.prompt({
                    formType: 2,
                    value: e.data.onclick,
                    title: '点击事件',
                    area: ['600px', '350px']
                }, function(value, index, elem){
                    e.data.onclick = value
                    option.update(e.data)
                    layer.close(index);
                });
            }else if(e.event == 'delete'){
                option.delete(e.data.code)
            }
            layui.stope(e)
        })
        table.on('edit(menuTable)',function (e) {
            option.update(e.data)
        })

        form.on('select(type)',function (e) {
            if(e.value == 'button'){
                option.state.btn.type = 'button'
                $('[data-select-id="menu"]').hide()
                $('[data-select-id="btn"]').show()
            }else if(e.value == 'menuButton'){
                option.state.btn.type = 'menuButton'
                $('[data-select-id="menu"]').show()
                $('[data-select-id="btn"]').hide()
            }
            option.render()
        })


        $('[data-select-id="submit"]').click(function () {
            window.submit(option.getToolBar())
            window.close()
        })
        $('[data-select-id="add"]').click(function () {
            option.create({text:''})
        })
        $('[data-select-id="delete"]').click(function () {
            window.delete(option.state.btn.code)
            window.close()
        })

        window.setTimeout(function () {
            if(window.ready){
                window.ready(option)
            }
            if(option.state.btn.code && option.state.btn.code != ''){
                $('[data-select-id="delete"]').show()
            }
        },100)
    })
</script>